<template>
  <main class="taskCase_container">
    <h2>资源管理-地面站管理</h2>
    <header class="flex flex-between">
      <div class="aside">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          size="small"
        >
          <el-form-item label="地面站标识">
            <el-input
              v-model="formInline.dmzbs"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入地面站标识"
            ></el-input>
          </el-form-item>
          <el-form-item label="天线标识">
            <el-input
              v-model="formInline.txbs"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入天线标识"
            ></el-input>
          </el-form-item>
          <el-form-item label="天线名称">
            <el-input
              v-model="formInline.txmc"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入天线名称"
            ></el-input>
          </el-form-item>
          <!--          <el-form-item label="时间：">-->
          <!--            <el-date-picker v-model="formInline.times" type="daterange" range-separator="至" start-placeholder=""-->
          <!--              end-placeholder="">-->
          <!--            </el-date-picker>-->
          <!--          </el-form-item>-->

          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="aside">
        <el-button size="small" type="primary" @click="handleImportExcel"
          >导入</el-button
        >
        <el-button size="small" type="primary" @click="addNewTaskCase(1)"
          >添加地面站</el-button
        >
        <el-button size="small" type="primary" @click="DeleteGroundBattleData"
          >批量删除</el-button
        >
      </div>
    </header>
    <main class="table_container">
      <custom-table
        :columns="columns"
        :tableData="tableData"
        select
        index
        :handleSelectionChange="handleSelectionChange"
        :loading="tableLoading"
        :height="'75vh'"
      >
        <template v-slot:action="scope">
          <span class="operation" @click="EditObservationData(scope.row)"
          >编辑</span
          >
          <el-divider direction="vertical"></el-divider>
          <span class="operation" @click="DeleteGroundBattleData(scope.row)"
            >删除</span
          >
        </template>
      </custom-table>
    </main>

    <footer class="fl_row_start">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="formInline.pageCurrent"
        :page-size="formInline.pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </footer>

    <el-dialog
      :title="taskCaseBool ? '添加地面站' : '编辑地面站'"
      :visible.sync="dialogVisible"
      @close="cancel('ruleForm')"
    >
      <el-form
        :label-position="labelPosition"
        label-width="140px"
        :model="formLabelAlign"
        size="small"
        style="margin-top: 35px;padding: 0 16px;"
        :rules="rules"
        ref="ruleForm"
      >
        <div class="flex flex-evenly">
          <el-form-item label="地面战标识：" class="item-width" prop="dmzbs">
            <el-input
              v-max-length-tip="30"
              v-no-space
              v-model="formLabelAlign.dmzbs"
            ></el-input>
          </el-form-item>
          <el-form-item label="天线标识：" class="item-width" prop="txbs">
            <el-input
              v-max-length-tip="30"
              v-no-space
              v-model="formLabelAlign.txbs"
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex flex-evenly">
          <el-form-item label="天线名称：" class="item-width" prop="txmc">
            <el-input
              v-max-length-tip="30"
              v-no-space
              v-model="formLabelAlign.txmc"
            ></el-input>
          </el-form-item>
          <el-form-item label="接收仰角：" class="item-width" prop="zxjsyj">
            <el-input
              v-max-length-tip="10"
              v-no-space
              v-only-number
              v-model="formLabelAlign.zxjsyj"
              @input="handleInput($event, 'zxckyj')"
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex flex-evenly">
          <el-form-item label="经度：" class="item-width" prop="dljd">
            <el-input
              v-max-length-tip="30"
              v-model="formLabelAlign.dljd"
              @input="handleInput($event, 'dljd')"
            ></el-input>
          </el-form-item>
          <el-form-item label="纬度：" class="item-width" prop="dlwd">
            <el-input
              v-max-length-tip="30"
              v-no-space
              v-model="formLabelAlign.dlwd"
              @input="handleInput($event, 'dlwd')"
            ></el-input>
          </el-form-item>
        </div>
        <div class="single-form-dom">
          <el-form-item label="高度：" prop="hbgd">
            <el-input
              v-max-length-tip="30"
              v-no-space
              v-only-number
              v-model="formLabelAlign.hbgd"
              @input="handleInput($event, 'hbgd')"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveTaskCase('ruleForm')"
          >确 定</el-button
        >
        <el-button @click="cancel('ruleForm')">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="uploadDialog"
      title="地面站文件上传"
      width="30%"
      @close="closeModal"
    >
      <custom-upload @fileCallback="fileCallback" ref="fileRef" />

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="uploadData">确 定</el-button>
        <el-button @click="closeModal">取 消</el-button>
      </span>
    </el-dialog>
  </main>
</template>

<script src="./index.js"></script>
<style lang="scss" src="../observation/index.scss" scoped></style>
